<template>
    <h1>添加</h1>
    <el-form :model="userdata" label-width="auto" style="max-width: 600px">
    <el-form-item label="name">
      <el-input v-model="userdata.username" />
    </el-form-item>
    <el-form-item label="phone">
      <el-input v-model="userdata.phone" />
    </el-form-item>
    <el-form-item label="password">
      <el-input v-model="userdata.password" />
    </el-form-item>
    <el-form-item label="角色">
      <el-select v-model="userdata.role" placeholder="选择角色">
        <el-option :label="item.name" :value="item.id" v-for="item in roleData"/>
      </el-select>
    </el-form-item>
    <el-form-item label="部门">
      <el-select v-model="userdata.department" placeholder="选择部门">
        <el-option :label="item.name" :value="item.id" v-for="item in departmentData"/>
      </el-select>
    </el-form-item>
    <el-form-item label="职位">
      <el-select v-model="userdata.position" placeholder="选择职位">
        <el-option :label="item.name" :value="item.id" v-for="item in positionData"/>
      </el-select>
    </el-form-item>




    </el-form>



    <el-button type="primary" @click="submit">提交</el-button>


</template>




<script setup>
import { ref,onMounted } from 'vue'
import axios from 'axios';
import http from '../http';



const userdata = ref({
    "username":"",
    'role':"",
    "password":"",
    "phone":"",
    "department":"",
    "position":""
})



const roleData = ref([])


const departmentData = ref([])

const positionData = ref([])

  
  
const getroledata = () => {
      http.get('http://127.0.0.1:8000/rbac/rlist/')
      .then((res) => {
          roleData.value = res.data.roles;
          departmentData.value = res.data.departments;
          positionData.value = res.data.positions;
      })
  
  }
  
  
onMounted(() => {
      getroledata()
  })



const submit = () => {
  console.log(userdata.value)
    http.post('http://127.0.0.1:8000/rbac/create/',userdata.value)
      .then((res) => {
          console.log(res)
      })
}
   


</script>



<style scoped>



</style>